<template>
  <div class="Breadcrumb">
    <el-breadcrumb separator="/" class="biaoqian">
      <el-breadcrumb-item :to="{ path: '/teacherInterface' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考务管理</el-breadcrumb-item>
      <el-breadcrumb-item>系部试卷提交申请</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
  </div>
  <div class="showUnTicketInfo">
    <div class='box'>
      <el-form :model="queryForm" size="middle" :inline="true" style="padding-left: 20px;  ">
        <el-form-item label="课程名称">
          <el-input v-model="queryForm.courseName" placeholder="请输入课程名称" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="审批人">
          <el-input v-model="queryForm.approverName" placeholder="请输入审批人" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="审批状态">
          <el-select v-model="queryForm.approvalStatus" placeholder="请输入审批状态" clearable style="width: 240px">
            <el-option v-for="e in approvalStatus" :key="e" :value="e.value" :label="e.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button @click="handleSearch" type="primary" :icon="Search" size="mini">搜索</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="handleReset" :icon="Refresh" size="mini">重置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" :icon="Plus" size="mini" @click="handleAdd">添加申请</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="box-content">
      <el-table v-model:data="dataList" height="450" style="width: 100%">
        <el-table-column prop="courseName" label="课程名字" align="center" />
        <el-table-column prop="applicantName" label="申请人" align="center" />
        <el-table-column prop="applicationDate" label="申请时间" align="center" />
        <el-table-column prop="approvalStatus" label="审批状态" align="center">
        </el-table-column>
        <el-table-column prop="approvalDate" label="审批日期" align="center">
        </el-table-column>
        <el-table-column prop="approvalOpinion" label="审批意见" align="center">
        </el-table-column>
        <el-table-column prop="approverName" label="审批人" align="center">
        </el-table-column>
        <el-table-column prop="paperContent" label="试卷" align="center">
          <template #default="scope">
            <a v-if="scope.row.paperContent.length>1" :href="scope.row.paperContent" target="_blank">下载</a>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.approvalStatus==='未审批'" @click="handleEdit(scope.row)" :icon="Edit" size="mini"
              style="width: 5px; height: 1px;  "></el-button>
            <el-popconfirm title="确定删除吗" confirm-button-text="确定" cancel-button-text="取消" icon="InfoFilled"
              @confirm="handleDelete(scope.row)" hide-after="0">
              <template #reference>
                <el-button v-if="scope.row.approvalStatus==='未审批'" :icon="Delete" size="mini" style="width: 1px; height: 1px; "></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" :total=pageTotal :page-size="pageSize"
          v-model:current-page="curPage" />
      </div>
    </div>
    <ExampaperApplicationDialog :showDialog="showDialog" @dialogClosed="handleDialogClosed" :dialogType="dialogType"
      :applyId="applyId" :editForm="editForm"></ExampaperApplicationDialog>
  </div>
</template>

<script>
import api from '@/api/api';
import ExampaperApplicationDialog from '@/components/TeacherComponents/ExampaperApplicationDialog.vue';
import { Delete, Edit } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

export default {
  components: {
    ExampaperApplicationDialog
  },
  mounted() {
    this.getData()
  },
  data() {
    return {
      dataList: [],
      curPage: 1,
      pageSize: 5,
      pageTotal: 0,
      showDialog: false,
      queryForm: {
        'approverName': '',
        'approvalStatus': '',
        'semesterId': '',
        'week': ''
      },
      approvalStatus: [
        { value: '0', label: '批准' },
        { value: '1', label: '驳回' },
        { value: '2', label: '未审批' },
      ],
      semester: [
        // 有id, name, weekCount, isCurrentSemester字段
      ],
      dialogType: 'add',
      applyId: '',
      editForm: '',
    }
  },
  methods: {
    getData() {
      api.exampaper_application.page_by_id(this.curPage, this.pageSize,
        sessionStorage.getItem('userid'), this.queryForm.courseName,
        this.queryForm.approverName, this.queryForm.approvalStatus
      )
        .then((res) => {
          this.dataList = res.data.data.records
          this.pageTotal = res.data.data.total
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleAdd() {
      this.dialogType = 'add'
      this.showDialog = true
    },
    handleDialogClosed() {
      this.showDialog = false
      this.getData()
    },
    handleSearch() {
      this.getData()
    },
    handleReset() {
      this.queryForm.approvalStatus = ''
      this.queryForm.approverName = ''
      this.queryForm.semesterId = ''
      this.queryForm.week = ''
      this.getData()
    },
    handleEdit(row) {
      this.editForm = JSON.parse(JSON.stringify(row))
      this.applyId = row.id
      this.dialogType = 'edit'
      this.showDialog = true
    },
    handleDelete(row) {
      api.exampaper_application.del(row.id).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        this.getData()
      }).catch((err) => {
        console.log(err)
      })
    },
  },

  watch: {
    curPage(newValue, oldValue) {
      this.getData()
    }
  },
  computed: {
    Edit() {
      return Edit
    },
    Delete() {
      return Delete
    }
  }
}
</script>